<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>循环结构</title>
  <style>
    span {
      display: inline-block;
      width: 50px;
      height: 30px;
      line-height: 30px;
      background-color: lightyellow;
      color: red;
      border: 1px dashed blue;
      padding: 3px 2px;
      text-align: center;
      margin-right: 2px;
      margin-bottom: 2px;
    }
  </style>
  <script>
    /**
     * 案例一：打印1-100之间所有数字之和。(while循环)
     */
    function fun1(){
      let i = 1           // ① 循环变量初始化
      let sum = 0       //  循环求和变量
      while (i <= 100) {  // ② 循环条件
        sum += i          // 循环累加求和
        i++               // ③ 循环变量的修改
      }
      console.log("sum = ",sum)
    }
    // fun1()
    /**
     * 案例二：打印1-100之间个位数是3的数字，并且每五个一换行！
     * 分析：
     *  ① 个位数是3： i % 10 == 3
     *  ② 五个一换行，count % 5 == 0,此时打印换行！
     */
    function fun2(){
      // 2.1 定义一个计数器
      let count = 0
      // 2.2 开始统计个位数是3的数字的个数
      for (let i = 1; i <= 100 ; i++) {
        // 2.2.1 个位数是3的数字
        if (i % 10 === 3) {
          count++
          document.write("<span>" + i + "</span>")
          if (count % 5 === 0) {
            document.write("<br>")
          }
        }
      }
    }
    fun2()
  </script>
</head>
<body>

</body>
</html>
